// 2-购物车样式
let shopCon = document.querySelector(".shopCon")
let oTotalPrice = document.querySelector('.totalPrice')
let last = document.querySelector('.last')

// 获取商品                   看list传过来的变量
let arr = JSON.parse(localStorage.getItem('cakeArr')) || []
let noshop = document.querySelector(".noshop")
let haveshop = document.querySelector(".haveshop")
// 判断是否有商品
if (arr.length == 0) {
    // alert(1)
    noshop.style.display = 'block';
    haveshop.style.display = 'none';
}
// console.log(arr)
// 重新渲染保存数据
dataHTML()
function dataHTML() {
    // 先让其变为空，否则再进行加/减时会重复出现
    shopCon.innerHTML = ""
    let price = 0
    // 判断是否有商品
    arr.forEach(ele => {
        // console.log(shopCon);
        let str = `<div class="shopone">
        <div class="shoponebox">
            <div class="shople">
                <img data-src="${ele.cake_img}" alt="">
                <p>
                    <span>${ele.cake_name}</span><br>
                    <b>${ele.cake_weight}</b>
                </p>
            </div>
            <div class="card" cakeId = "${ele.cake_id}">
                <div class="cardCon">
                    选择生日牌
                </div>
                <ul class="carsEr">
                    <li class="birth_card">生日快乐</li>
                    <li class="birth_card">节日快乐</li>
                    <li class="birth_card">HAPPY BIRTHDAY</li>
                    <li class="birth_card">纪念日快乐</li>
                    
                </ul>
            </div>
            <span class="allprice">￥${parseFloat(ele.cake_price).toFixed(2)}</span>
            <p class="threebutton">
                <input cakeId = "${ele.cake_id}" type="button" value="-">
                <input cakeId = "${ele.cake_id}" type="text" value="${ele.count}">
                <input cakeId = "${ele.cake_id}" type="button" value="+">
            </p>
            <span class="sameprice">￥${(ele.count * ele.cake_price).toFixed(2)}</span>
        </div>
        <u class="del" cakeId = "${ele.cake_id}">X</u>
    </div>`
        shopCon.innerHTML += str
        price += ele.count * ele.cake_price

    })
    // 重新赋值数据
    localStorage.setItem('cakeArr', JSON.stringify(arr))
    if (arr.length == 0) {
        noshop.style.display = 'block';
        haveshop.style.display = 'none';
    }
    // 总价
    oTotalPrice.innerHTML = `总价：${price}元`
    last.innerHTML = `总价：${price}元`

}
// 事件委托
shopCon.addEventListener("click", function (ev) {
    // 减
    if (ev.target.value === '-') {
        let id = ev.target.getAttribute("cakeId")
        arr.forEach(ele => {
            if (ele.cake_id === id) {
                ele.count--
                // 判断让其数字最小不能小于0
                if (ele.count === 0) {
                    ele.count = 1
                }
            }
        })
        dataHTML()
    }
    // 加
    if (ev.target.value === '+') {
        let id = ev.target.getAttribute("cakeId")
        arr.forEach(ele => {
            if (ele.cake_id === id) {
                ele.count++
            }
        })
        dataHTML()
    }
    // 删除
    if (ev.target.className === "del") {
        let id = ev.target.getAttribute("cakeId")
        arr.forEach((ele, index) => {
            if (ele.cake_id === id) {
                arr.splice(index, 1)
            }
        })
        dataHTML()
    }

})
// 输入的数字改变个数
shopCon.addEventListener("change", function (ev) {
    if (ev.target.type === 'text') {
        let id = ev.target.getAttribute("cakeId")
        arr.forEach(ele => {
            if (ele.cake_id === id) {
                ele.count = parseInt(ev.target.value)
            }
        })
        dataHTML()
    }
})
// 全部删除
let mleft = document.querySelector(".mleft")
// console.log(mleft);
mleft.addEventListener('click', function () {
    arr.forEach((ele, index) => {
        arr.splice(index)
    })
    dataHTML()
    window.history.go(0)

})

// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// 选择生日牌的方法_____必须在最后面  问题：点击全部显示
let shopone = document.querySelectorAll(".shopone")
let cardCon = document.querySelectorAll(".cardCon")
let carsEr = document.querySelector(".carsEr")

cardCon.forEach(function (ele, index) {
    // console.log(ele,index);
    ele.addEventListener("click", function () {
        // 获取下一个兄弟节点  carsEr
        // console.log(this.nextElementSibling);
        let carsEr = this.nextElementSibling
        carsEr.style.display = "block"

        let cCon = carsEr.querySelectorAll(".birth_card")
        // console.log(cCon);
        cCon.forEach(function (ele, index) {
            ele.addEventListener("click", function () {
                // alert(1)
                // console.log(ele);
                ele.parentElement.previousElementSibling.innerHTML = ele.innerHTML
                carsEr.style.display = "none"
            })
        })
    })
})







